
<template>
    <div>
        <div class="grid grid-cols-4 gap-3">
            <div class="w-24 h-24 bg-blue-100 relative group" v-for="(item,index) in objfile" :key="index">
                <div class="w-24 h-24 overflow-hidden flex items-center justify-center">
                  <img :src="item.filepath" v-if="item.filepath" @click="preview(objfile,index)">
                </div>
                
                <div class="absolute w-5 h-5 rounded-full -top-2 -right-2 bg-white overflow-hidden" @click="del(index)" v-if="havedel==1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-red-500"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>
                </div>
                <div class="absolute text-red-500 bg-white rounded px-2 py-[2px] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-sm hidden group-hover:block cursor-pointer" @click="change_photos_order(index)">设为封面</div>
            </div>
            <div class="w-24 h-24 bg-blue-300 "  @click="isUpload=1" v-if="haveadd==1">
                <div class="h-full w-full flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-14 h-14 fill-white"><path fill="none" d="M0 0h24v24H0z"></path><path d="M21 15V18H24V20H21V23H19V20H16V18H19V15H21ZM21.0082 3C21.556 3 22 3.44495 22 3.9934L22.0007 13.3417C21.3749 13.1204 20.7015 13 20 13V5H4L4.001 19L13.2929 9.70715C13.6528 9.34604 14.22 9.31823 14.6123 9.62322L14.7065 9.70772L18.2521 13.2586C15.791 14.0069 14 16.2943 14 19C14 19.7015 14.1204 20.3749 14.3417 21.0007L2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082ZM8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7Z"></path></svg>
                </div>
            </div>
        </div>
        <div class="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 z-40" v-if="isUpload">
            <component :is="files" :selnum="max" :sids="sids" isopen="1" @useFiles="useFiles"></component>
            <div class="flex justify-center">
              <div class="w-9 h-9 bg-red-500 rounded-full flex justify-center items-center" @click="isUpload=0"><i class="ri-close-line ri-2x text-white"></i></div>
            </div>
        </div>
        <teleport to='body'>
          <ypviewphoto :dataList="dataView" :index="indexView" v-if="showView" @close="showView=false" @goleft="goleft"  @goright="goright"></ypviewphoto>
        </teleport>
    </div>


  </template>
  <script setup>
  import { reactive, onMounted, ref } from 'vue'
  import files from '@/pages/files/list'
  const props = defineProps({
    modelValue: {
      default: ''
    },
    max:{
      default:2,
      type:Number
    },
    haveadd:{
      default:1
    },
    havedel:{
      default:1
    },
    category_id:{
      default:0
    },
    ypcms_id:{
      default:0
    }
  })
  const sids=reactive([])
  const isUpload = ref(0)
  const objfile = reactive([])
  const emit = defineEmits(['update:modelValue'])

  const showView=ref(false)
  const dataView=ref([])
  const indexView=ref(0)

  const preview=(obj,i)=>{
    dataView.value=obj
    indexView.value=i
    showView.value=true
  }
  const goleft=()=>{
    if(indexView.value>0){
      indexView.value--
    }
    
  }
  const goright=()=>{
    if(indexView.value<dataView.value.length-1){
      indexView.value++
    }
  }

  const useFiles = (obj) => {

    Object.keys(obj).map((k) => {
        objfile.push(obj[k])
        sids.push(obj[k].id)
    })
    isUpload.value = 0
    emit('update:modelValue', sids.join(','))
  }

  const change_photos_order=(index)=>{
    
    let o=objfile[index]
    objfile[index]=objfile[0]
    objfile[0]=o

    let z=sids[index]
    sids[index]=sids[0]
    sids[0]=z

    
    emit('update:modelValue', sids.join(','))
  }

  const del=(i)=>{

      objfile.splice(i,1)

      sids.length=0
      Object.keys(objfile).map((k) => {
          sids.push(objfile[k].id)
      })


  }

  onMounted(async () => {
    if (props.modelValue) {
      for(let i in props.modelValue){
        objfile.push(props.modelValue[i])
        sids.push(props.modelValue[i].id)
      }
      emit('update:modelValue', sids.join(','))
    }
    console.log(props.max)

  })
  </script>
  